<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>植物详情 - 植物保护管理系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/detail.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <img src="images/logo.png" alt="logo">
                <h1>植物保护管理系统</h1>
            </div>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="plants.html">植物列表</a></li>
                <li><a href="index.html#protection">保护措施</a></li>
                <li><a href="index.html#statistics">数据统计</a></li>
            </ul>
        </nav>
    </header>

    <main class="detail-container">
        <div class="container">
            <div class="back-button">
                <a href="plants.html">返回</a>
            </div>
            
            <div class="plant-info">
                <div class="plant-header">
                    <img id="plantImage" src="" alt="植物图片" class="plant-image">
                    <div class="plant-basic-info">
                        <h2 id="plantName"></h2>
                        <p>科属：<span id="family"></span></p>
                        <p>生命周期：<span id="lifecycle"></span></p>
                        <p>养护难度：<span id="careLevel"></span></p>
                    </div>
                </div>

                <div class="growing-conditions">
                    <h3>生长条件</h3>
                    <div class="conditions-grid">
                        <div class="condition-item">
                            <span class="icon temperature"></span>
                            <p>适宜温度：<span id="temperature"></span></p>
                        </div>
                        <div class="condition-item">
                            <span class="icon humidity"></span>
                            <p>适宜湿度：<span id="humidity"></span></p>
                        </div>
                        <div class="condition-item">
                            <span class="icon light"></span>
                            <p>光照要求：<span id="light"></span></p>
                        </div>
                    </div>
                </div>

                <div class="care-instructions">
                    <h3>养护说明</h3>
                    <p id="careInstructions"></p>
                </div>

                <div class="treatment-plans">
                    <h3>防治方案推荐</h3>
                    <div class="treatment-tabs">
                        <button class="tab-btn active" onclick="showTreatment('agronomy')">农艺管理</button>
                        <button class="tab-btn" onclick="showTreatment('disease')">病害防治</button>
                        <button class="tab-btn" onclick="showTreatment('pest')">虫害防治</button>
                        <button class="tab-btn" onclick="showTreatment('environment')">环境问题</button>
                    </div>
                    <div id="treatmentContent" class="treatment-content">
                        <!-- 内容将通过 JavaScript 动态加载 -->
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="footer-content">
            <p>&copy; 2024 植物保护管理系统</p>
        </div>
    </footer>

    <script src="js/detail.js"></script>
</body>
</html> 